<template>
  <div id="homepage">
    <!---login-->
    <el-form :model="ruleForm2" :rules="rules2" status-icon ref="ruleForm2" label-position="left" label-width="0px"
      class="demo-ruleForm login-page">

      <h3 class="title">阳光正好</h3>
      <el-form-item prop="username">
        <el-input type="text" v-model="ruleForm2.username" auto-complete="off" placeholder="用户名"
          @keyup.native="checkInput"></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" v-model="ruleForm2.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>
      <el-form-item prop="imgcode">
        <el-input type="imgcode" v-model="ruleForm2.imgCode" auto-complete="off" placeholder="验证码"></el-input>
      </el-form-item>
      <el-checkbox v-model="checked" class="rememberme">记住密码</el-checkbox>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit" :loading="logining">登录</el-button>
      </el-form-item>
      <a @click="imageCodeGet">imgecode</a>
      <a @click="downLoadPdf">downLoadPdf</a>
      <!-- <h>朋友，如果你还活着，把醉帅醉酷醉潇洒醉积极的一面展示出来！</h> -->
    </el-form>
    <div>
      <h1 ref="myh1">测试ref属性</h1>
      <input v-if="isVisable" @blur="showButton" ref="iptRef">
      <button v-else @click="showThis">点我ref</button>
    </div>
    <HelloWorld ref="refTest"></HelloWorld>
  </div>


</template>
<script>

  import HelloWorld from "@/components/helloWorld.vue"


  export default ({
    name: 'homePage',
    data () {
      return {
        form: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        background: "../pic/微信图片_20210809112030.jpg",
        logining: false,
        ruleForm2: {
          username: '',
          password: '',
          imgCode: ''
        },
        rules2: {
          username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
          password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
        },
        checked: false,
        isVisable: true,
        arr: ['小红', '小明', '小王', 'xiaomingxing'],
        userId: "10086",
        imgCodeResult: false
      }
    },
    methods: {
      handleSubmit () {
        let a = this.ruleForm2.username
        this.ruleForm2.username = a.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/ig, '')
        var that = this;
        //this.$router.push('/helloWorld')
        this.$axios.post("/login/cImgCode", "userId=" + a + "&&imgCode=" + this.ruleForm2.imgCode, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
          .then(function (response) {
            that.imgCodeResult = response.data;
          }).catch(error => {
            console.log(error)
          });
        if (this.imgCodeResult) {
          this.$axios
            .get('/login/a')
            .then(function (response) {
              console.log("返回了" + response.data)
            }).catch(error => {
              console.log(error)
            })
        }
        this.$router.push('/keyBoardDemo');

      },
      imageCodeGet () {
        var readyData = JSON.stringify({
          userId: "1234"
        });
        var that = this;
        console.log(readyData);
        this.$axios.post("/imgCode", "userId=12312", { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } })
          .then(function (response) {
            that.ruleForm2.imgCode = response.data;
            console.log(response.data, that.ruleForm2.imgCode)
          }).catch(error => {
            console.log(error)
          })
      },
      doPrint (val) {
        var ordonnance = document.getElementById(val).contentWindow
        setTimeout(() => {
          ordonnance.print()
        }, 1000)
      },
      downLoadPdf () {
        var that = this;
        this.$axios.post("/manage/downloadLocal", "fileName=Nacos注册中心源码剖析.pdf", { headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, responseType: 'blob' })
          .then(function (response) {
            console.log("pdf下载...")
            const blob = new Blob([response.data], { type: 'application/pdf' })
            var date = (new Date()).getTime()
            var ifr = document.createElement('iframe')
            ifr.style.frameborder = 'no'
            ifr.style.display = 'none'
            ifr.style.pageBreakBefore = 'always'
            ifr.setAttribute('id', 'printPdf' + date)
            ifr.setAttribute('name', 'printPdf' + date)
            ifr.src = window.URL.createObjectURL(blob)
            document.body.appendChild(ifr)
            that.doPrint('printPdf' + date)
            window.URL.revokeObjectURL(ifr.src) // 释放URL 对象
          }).catch(error => {
            console.log(error)
          })
      },

      checkInput () {
        let a = this.ruleForm2.username
        let b = a.match(/[^A-Za-z0-9\u4e00-\u9fa5]/ig)
        console.log(b)
        if (b != null) {
          this.ruleForm2.username = a.replace(/[^A-Za-z0-9\u4e00-\u9fa5]/ig, '')
          alert("只能输入数字、字母、汉字")
        }
      },
      testMe () {
        // 获取远端图片
        this.$axios({
          method: 'get',
          url: 'http://bit.ly/2mTM3nY',
          responseType: 'stream'
        })
          .then(function (response) {
            response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
          });
      },
      showThis () {
        console.log(this)
        console.log(this.$refs.refTest.msg)
        this.$refs.myh1.style.color = "red"
        this.isVisable = true
        this.$nextTick(() => {
          this.$refs.iptRef.focus()
        })
      },
      showButton () {
        this.isVisable = false
        console.log(this.arr)
        const arrs = this.arr
        //   arrs.forEach((item,index)=>{
        //       console.log(item)
        //       if(item==='小王'){
        //         console.log(index)
        //       }
        //   })
        // arrs.some((item,index)=>{
        //     console.log(item)
        //     if(item==='小红'){
        //         console.log(index)
        //         return true
        //     }
        // })
        const res = arrs.every(item => item.length == 2)
        console.log(res)
      }
    },
    components: {
      HelloWorld
    }
  })
</script>
<style scoped>
  .login-container {
    /* width: 100%;
    height: 100%; */
    width: 100%;
    height: 100%;
    background-image: url("../pic/微信图片_20210809112030.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
  }

  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    background-image: url("../pic/微信图片_20210809112030.jpg");
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }

  label.el-checkbox.rememberme {
    margin: 0px 0px 15px;
    text-align: left;
  }

  /* #homepage { 
     width:125%;
     height:125%;
     position: absolute;
     background-size:100% 100%;
     background-repeat: no-repeat;
     background-image: url("../pic/微信图片_20210809112030.jpg");
     background-position: center;
     background: url("~@assets/img/page/background.png") no-repeat center/101% 101%; 
}
 */
</style>